<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>地图展示</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <style>
    #container {
        position: relative;
        overflow: auto;
        width: 100%;
        height: 790px;
        margin: 0;
        font-family: "微软雅黑";
    }

    #result{
            padding: 7px 10px;
            position: fixed;
            top: 5px;
            right: 10px;
            width: 450px;
            background: #fff;
            box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
            border-radius: 7px;
            z-index: 99;
        }
        #result input{
            width:130px; 
            margin-right:10px;
            height:25px;
            border: 1px solid rgba(27, 142, 236, 0.5);
            border-radius: 5px;
        }
        #result button{
            border: 1px solid rgba(27, 142, 236, 0.5);
            border-radius: 5px;
            background: rgba(27, 142, 236, 0.5);
            color: #fff
        }
    
    ul li {
        list-style: none;
    }

    .drawing-panel1 {
        z-index: 999;
        position: fixed;
        bottom: 6rem;
        right: 560px;
        margin-left: 3rem;
        padding: 1rem 1rem;
        border-radius: .25rem;
        background-color: #fff;
        box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
    }
    .btn {
        width: 200px;
        height: 30px;
        float: left;
        background-color: #fff;
        color: rgba(27, 142, 236, 1);
        font-size: 14px;
        border:1px solid rgba(27, 142, 236, 1);
        border-radius: 5px;
        margin: 0 5px;
        text-align: center;
        line-height: 30px;
    }
    .btn:hover {
        background-color: rgba(27, 142, 236, 0.8);
        color: #fff;
    }

    #addresult{
           position: absolute;
           top: 60px;
           left: 7px;
           width: 250px;
           height: 30px;
           line-height: 30px;
           text-align: center;
           background: #fff;
           box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
           border-radius: 7px;
           z-index: 99;
       }

       #revresult{
           position: absolute;
           top: 95px;
           left: 7px;
           padding: 0px 7px;
           min-width: 350px;
           height: 70px;
           line-height: 35px;
           background: #fff;
           box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
           border-radius: 7px;
           z-index: 99;
       }

    .drawing-panel {
     z-index: 999;
     position: fixed;
     bottom: 0.2rem;
     left: 38rem;
     margin-left: 2.5rem;
     padding-left: 0;
     border-radius: .25rem;
     height: 47px;
     box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
     }
     .bmap-btn {
     border-right: 1px solid #d2d2d2;
     float: left;
     width: 64px;
     height: 100%;
     background-image: url(//api.map.baidu.com/library/DrawingManager/1.4/src/bg_drawing_tool.png);
     cursor: pointer;
     }
     .drawing-panel .bmap-marker {
     background-position: -65px 0;
     }
     .drawing-panel .bmap-polyline {
     background-position: -195px 0;
     }
     .drawing-panel .bmap-rectangle {
     background-position: -325px 0;
     }
     .drawing-panel .bmap-polygon {
     background-position: -260px 0;
     }
     .drawing-panel .bmap-circle {
     background-position: -130px 0;
     }

    #lnglat {
        position: absolute;
        top: 200px;
    }

    #findaddres {
        position: absolute;
        top: 10px;
        right: 700px

    }
    </style>
    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=YcdPUEdAjvsGl7jTG05VS80cDIRSk6uM"></script>
    <script src="//bj.bcebos.com/v1/mapopen/cms/"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=YcdPUEdAjvsGl7jTG05VS80cDIRSk6uM"></script>
    <script type="text/javascript" src="//mapopen.cdn.bcebos.com/github/BMapGLLib/DistanceTool/src/DistanceTool.min.js"></script>
    <link href="//mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.css" rel="stylesheet">
    <script type="text/javascript" src="//mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/mhDoLbDldZc3qpsJHpLogda//BVZbgYuw6kof4u2FrCedxOtgRZDTHgHUhOCVim" crossorigin="anonymous"></script>
</head>
<body>

    <nav class="navbar navbar-expand-lg bg-body-tertiary">
        <div class="container-fluid">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
            <a class="navbar-brand" href="#">在线地图</a>
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
              <li class="nav-item">
                <img style="width: 40px;"  src="./images/放大.png" class="nav-link" aria-current="page" onclick="zoomIn()"></img>
              </li>
              <li class="nav-item">
                <img src="./images/缩小.png" style="width: 40px;"  class="nav-link" onclick="zoomOut()"></img>
              </li>
              <li class="nav-item">
                <img style="width: 40px;" src="./images/全图显示.png" class="nav-link"  onclick="zoomToFullExtent()"></img>
              </li>
              <li class="nav-item">
                <img src="./images/前一视图.png" style="width: 40px;" class="nav-link" onclick="returnNextView()"></img>
              </li>
              <li class="nav-item">
                <img src="./images/后一视图.png" style="width: 40px;" class="nav-link" onclick="returnPrevView()"></img>
              </li>
            </ul>
            
          </div>
        </div>
      </nav>
    <div id="container"></div>

    <div id="controls">

    <div id="lnglat">点击地图获取经纬度</div>

    <ul class="drawing-panel1" >
        <li class = "btn" onclick = "openEdit()">开启线/面/圆可编辑</li>
        <li class = "btn" onclick = "closeEdit()">关闭线/面/圆可编辑</li>
    </ul>

    <div style="z-index: 999;position: fixed; bottom: 6rem; right: 75px"  class="btn-group" role="group" aria-label="Basic radio toggle button group">
            <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="on" checked>
            <label style="width: 100px; text-align: center; line-height: 100%;"   class="btn btn-outline-primary" for="btnradio1" onclick="myDis.open()">开启测距</label>
          
            <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
            <label style="width: 100px; text-align: center; line-height: 100%;"   class="btn btn-outline-primary" for="btnradio2" onclick="myDis.close()">关闭测距</label>
    </div>

    <div style="z-index: 999;position: fixed; bottom: 3rem; right: 64px"  class="btn-group" role="group" aria-label="Basic radio toggle button group">
        <input type="radio" class="btn-check" name="btnradio" id="btnradio11" autocomplete="on" checked>
        <label style="width: 110px; text-align: center; line-height: 100%;"   class="btn btn-outline-primary" for="btnradio11" onclick="addOverlay()">添加覆盖物</label>
      
        <input type="radio" class="btn-check" name="btnradio" id="btnradio22" autocomplete="off">
        <label style="width: 110px; text-align: center; line-height: 100%;"   class="btn btn-outline-primary" for="btnradio22" onclick="removeOverlay()">清除覆盖物</label>
    </div>
    <div id='addresult'>北京市海淀区上地10街</div>

    <div id='revresult'>
        点击展示详细的地址：
        <div id='result_l'></div>
    </div>

    <div id='result'>
        经度: <input id="lng" type="text"/>
        纬度: <input id="lat" type="text"/>
        <button onclick="theLocation()">查询</button>
    </div>
   
    <ul class = "drawing-panel">
            <li class="bmap-btn bmap-marker" id="marker" onclick="draw(this)"></li>
            <li class="bmap-btn bmap-polyline" id="polyline" onclick="draw(this)"></li>
            <li class="bmap-btn bmap-rectangle" id="rectangle" onclick="draw(this)"></li>
            <li class="bmap-btn bmap-polygon" id="polygon" onclick="draw(this)"></li>
            <li class="bmap-btn bmap-circle" id="circle" onclick="draw(this)"></li>
    </ul>

    <div id="findaddres">
        <div id="r-result">输入地址:<input type="text" id="suggestId" size="20" value="百度" style="width:150px;" /></div>
        <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
    </div>
	    


        
    </div>
</body>
</html>
<script type="text/javascript">

    // 百度地图API功能
	function G(id) {
		return document.getElementById(id);
	}
    
    // 创建Map实例
    var map = new BMapGL.Map('container', {
        minZoom: 5,
        maxZoom: 20,
        enableDblclickZoom: false,
        displayOptions: {
        building: false
        }
    }); 
    // 初始化地图,设置中心点坐标和地图级别
    map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12);

    var viewStack = []; // 视图栈
    var prevView = null; // 前一视图
    var nextView = null  //后一视图


    // 开启鼠标滚轮缩放
    map.enableScrollWheelZoom(true); 
    // 添加缩放控件
    var zoomCtrl = new BMapGL.ZoomControl();  
    map.addControl(zoomCtrl);

    map.addControl(new BMapGL.MapTypeControl());

    //放大事件
    function zoomIn() {
        map.zoomIn()
    }

    //缩小事件
    function zoomOut() {
        map.zoomOut()
    }

    //缩放至全图
    function zoomToFullExtent() {
        var minZoom = 5
        map.setZoom(minZoom)
    }

    //监听地图移动结束事件
    map.addEventListener("moveend", function() {
        viewStack.push([map.getCenter(), map.getZoom()]);
        prevView = null; // 清除前一视图
        nextView = viewStack[viewStack.length - 2]
      });


    //前一视图
    function returnPrevView() {
        if (viewStack.length >= 2) {
          var currentView = viewStack.pop();
          prevView = viewStack.pop();
          map.setCenter(prevView[0]);
          map.setZoom(prevView[1]);

          nextView = currentView
          viewStack.push(prevView);
          viewStack.push(currentView);
        }
    }

    //后一视图
    function returnNextView() {
        if (nextView != null) {
          map.setCenter(nextView[0]);
          map.setZoom(nextView[1]);
        }
    }

    //测距
    var myDis = new BMapGLLib.DistanceTool(map);
    // 监听测距过程中的鼠标事件
    myDis.addEventListener('drawend', function(e) {
    console.log("drawend");
    console.log(e.points);
    console.log(e.overlays);
    console.log(e.distance);
});
    myDis.addEventListener("addpoint", function(e) {
    console.log("addpoint");
    console.log(e.point);
    console.log(e.pixel);
    console.log(e.index);
    console.log(e.distance);
});
    myDis.addEventListener("removepolyline", function(e) {
    console.log("removepolyline");
    console.log(e);
});

    //根据经纬度跳转到指定位置
    function theLocation(){
            if(document.getElementById("lng").value != "" && document.getElementById("lat").value != ""){
                map.clearOverlays(); 
                var new_point = new BMapGL.Point(document.getElementById("lng").value,document.getElementById("lat").value);
                var marker = new BMapGL.Marker(new_point);  // 创建标注
                map.addOverlay(marker);              // 将标注添加到地图中
                map.panTo(new_point);      
            }
        }  
    
    //点击获取经纬度
    map.addEventListener("click", function(e){
    var point = e.point;
    var info = "经度：" + point.lng.toFixed(3) + "，纬度：" + point.lat.toFixed(3)
    document.getElementById('lnglat').innerHTML = info;
});
    
    // 添加覆盖物
    function addOverlay() {
        var bd = new BMapGL.Boundary();
        bd.get('顺义区', function (rs) {
        var hole = new BMapGL.Polygon(rs.boundaries, {
        fillColor: 'blue',
        fillOpacity: 0.2
    });
    map.addOverlay(hole);
});
    }
    // 清除覆盖物
    function removeOverlay() {
        map.clearOverlays();
    }

    //创建地址解析器实例 + 信息窗口

    var myGeo = new BMapGL.Geocoder();
    // 将地址解析结果显示在地图上，并调整地图视野
    myGeo.getPoint('北京市海淀区上地10街', function(point){
        if(point){
            var marker = new BMapGL.Marker(point, {title: '北京市海淀区上地10街'})
            map.centerAndZoom(point, 16);
            map.addOverlay(marker)
            var opts = {
	            width : 200,     // 信息窗口宽度
	            height: 100,     // 信息窗口高度
	            title : "北京市" , // 信息窗口标题
	            message:"这里是故宫"
	        }
            var infoWindow = new BMapGL.InfoWindow("地址：北京市海淀区上地10街", opts);  // 创建信息窗口对象 
	        marker.addEventListener("click", function(){          
		    map.openInfoWindow(infoWindow, point); //开启信息窗口
	}); 
            
        }else{
            alert('您选择的地址没有解析到结果！');
        }
    }, '北京市')

    //逆解析
    var geoc = new BMapGL.Geocoder();
    map.addEventListener('click', function(e){
        console.log(e);
        var pt = e.latlng;
        var marker = new BMapGL.Marker(new BMapGL.Point(pt.lng, pt.lat));
        //map.addOverlay(marker);
        geoc.getLocation(pt, function(rs){
            var addComp = rs.addressComponents;
            document.getElementById('result_l').innerHTML = addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber
        })
    })


    //检索
    var ac = new BMapGL.Autocomplete(    //建立一个自动完成的对象
		{"input" : "suggestId"
		,"location" : map
	});

	ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
	var str = "";
		var _value = e.fromitem.value;
		var value = "";
		if (e.fromitem.index > -1) {
			value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
		}    
		str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
		
		value = "";
		if (e.toitem.index > -1) {
			_value = e.toitem.value;
			value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
		}    
		str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
		G("searchResultPanel").innerHTML = str;
	});

	var myValue;
	ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
	var _value = e.item.value;
		myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
		G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
		
		setPlace();
	});

	function setPlace(){
		map.clearOverlays();    //清除地图上所有覆盖物
		function myFun(){
			var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
			map.centerAndZoom(pp, 18);
			map.addOverlay(new BMapGL.Marker(pp));    //添加标注
		}
		var local = new BMapGL.LocalSearch(map, { //智能搜索
		  onSearchComplete: myFun
		});
		local.search(myValue);
	}

    //添加点线面
    var styleOptions = {
        strokeColor: '#5E87DB',   // 边线颜色
        fillColor: '#5E87DB',     // 填充颜色。当参数为空时，圆形没有填充颜色
        strokeWeight: 2,          // 边线宽度，以像素为单位
        strokeOpacity: 1,         // 边线透明度，取值范围0-1
        fillOpacity: 0.2          // 填充透明度，取值范围0-1
    };
    var labelOptions = {
        borderRadius: '2px',
        background: '#FFFBCC',
        border: '1px solid #E1E1E1',
        color: '#703A04',
        fontSize: '12px',
        letterSpacing: '0',
        padding: '5px'
    };

    // 实例化鼠标绘制工具
    var drawingManager = new BMapGLLib.DrawingManager(map, {
        // isOpen: true,        // 是否开启绘制模式
        enableCalculate: true, // 绘制是否进行测距测面
        enableSorption: true,   // 是否开启边界吸附功能
        sorptiondistance: 20,   // 边界吸附距离
        circleOptions: styleOptions,     // 圆的样式
        polylineOptions: styleOptions,   // 线的样式
        polygonOptions: styleOptions,    // 多边形的样式
        rectangleOptions: styleOptions,  // 矩形的样式
        labelOptions: labelOptions,      // label样式
    });  

    function draw(e) {
        var arr = document.getElementsByClassName('bmap-btn');
        for(var i = 0; i<arr.length; i++) {
            arr[i].style.backgroundPositionY = '0';
        }
        e.style.backgroundPositionY = '-52px';
        switch(e.id) {
            case 'marker': {
                var drawingType = BMAP_DRAWING_MARKER;
                break;
            }
            case 'polyline': {
                var drawingType = BMAP_DRAWING_POLYLINE;
                break;
            }
            case 'rectangle': {
                var drawingType = BMAP_DRAWING_RECTANGLE;
                break;
            }
            case 'polygon': {
                var drawingType = BMAP_DRAWING_POLYGON;
                break;
            }
            case 'circle': {
                var drawingType = BMAP_DRAWING_CIRCLE;
                break;
            }
        }
        // 进行绘制
        if (drawingManager._isOpen && drawingManager.getDrawingMode() === drawingType) {
            drawingManager.close();
        } else {
            drawingManager.setDrawingMode(drawingType);
            drawingManager.open();
        }
    };

    //可编辑
    var nodeT = new BMapGL.Icon('//mapopen-pub-jsapigl.bj.bcebos.com/demoimg/ditie_beijing_2.png', new BMapGL.Size(11, 11), {
    offset: new BMapGL.Size(5, 5)
});
var node = new BMapGL.Icon('//mapopen-pub-jsapigl.bj.bcebos.com/demoimg/zhongheyiyuan.png', new BMapGL.Size(11, 11), {
    offset: new BMapGL.Size(5, 5)
});
// 绘制面
var polygon = new BMapGL.Polygon([
    new BMapGL.Point(116.387112, 39.920977),
    new BMapGL.Point(116.385243, 39.913063),
    new BMapGL.Point(116.394226, 39.917988),
    new BMapGL.Point(116.401772, 39.921364),
    new BMapGL.Point(116.41248, 39.927893)
], {
    zIndex: 10,
    node: node,
    nodeT: nodeT,
    fillOpacity: 1,
    strokeStyle: 'dashed',
    strokeColor: 'blue',
    strokeWeight: 8,
    strokeOpacity: 1,
});
map.addOverlay(polygon);
// 绘制线
var polyline = new BMapGL.Polyline([
    new BMapGL.Point(116.399, 39.910),
    new BMapGL.Point(116.405, 39.920),
    new BMapGL.Point(116.423493, 39.907445)
], {
    strokeStyle: 'dashed',
    strokeColor: 'blue',
    strokeTexture: {
        url: 'https://mapopen-pub-jsapigl.bj.bcebos.com/svgmodel/Icon_road_blue_arrow.png',
        width: 16,
        height: 64
    },
    strokeWeight: 8,
    strokeOpacity: 0.8,
    node: node
});
map.addOverlay(polyline);
// 绘制圆
var circle = new BMapGL.Circle(new BMapGL.Point(116.404, 39.915), 500, {
    strokeColor: 'blue',
    strokeWeight: 2,
    strokeOpacity: 0.5,
    nodeT: nodeT,
});
map.addOverlay(circle);

// 绘制镂空面
var polyHole = new BMapGL.Polygon([[
    new BMapGL.Point(116.35965, 39.92855),
    new BMapGL.Point(116.35391, 39.93740),
    new BMapGL.Point(116.34873, 39.92855),
    new BMapGL.Point(116.34696, 39.91527),
    new BMapGL.Point(116.38335, 39.90930),
    new BMapGL.Point(116.38121, 39.93461),
    new BMapGL.Point(116.37920, 39.92855),
    new BMapGL.Point(116.37518, 39.93674),
    new BMapGL.Point(116.36885, 39.92877)
    ],[
    new BMapGL.Point(116.35, 39.925),
    new BMapGL.Point(116.36, 39.925),
    new BMapGL.Point(116.36, 39.92),
    new BMapGL.Point(116.35, 39.92),
    new BMapGL.Point(116.35, 39.925)
    ],[
    new BMapGL.Point(116.365, 39.925),
    new BMapGL.Point(116.37, 39.925),
    new BMapGL.Point(116.37, 39.92),
    new BMapGL.Point(116.365, 39.92),
    new BMapGL.Point(116.365, 39.925)
    ]], {
        zIndex: 5,
        fillOpacity: 1,
        fillColor: 'pink',
        strokeColor: '#8055e3',
        strokeWeight: 5,
        strokeOpacity: 1
});
map.addOverlay(polyHole);

function openEdit() {
    polyline.enableEditing();
    polygon.enableEditing();
    circle.enableEditing();
    polyHole.enableEditing();
}
function closeEdit() {
    polygon.disableEditing();
    polyline.disableEditing();
    circle.disableEditing();
    polyHole.disableEditing();
}
    
</script>